<template>
    <div class="tabbar">
        <!-- <router-link :to="{name:'home'}">这是首页</router-link>
        <router-link :to="{name:'category'}">分类</router-link>
        <router-link :to="{name:'find'}">这是发现</router-link>
        <router-link :to="{name:'cart'}">购物车</router-link>
        <router-link :to="{name:'mine'}">我的</router-link> -->
        <mt-tabbar v-model="selected">
            <mt-tab-item v-for="nav in navs" :key="nav.path" :id="nav.name">
                <img slot="icon" src="../assets/100x100.png">
                {{nav.meta.navTitle}}
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    import routes from "../router/routes"

    export default {
        name: "Tabbar",
        data(){
            return{
                selected:'home',
                navs:routes.filter(curr => curr.meta.isNav)
            }
        },
        watch:{
            //监视selected数据变化，当有变化时，跳转路由
            selected(newValue, oldValue){
                //console.log(newValue, oldValue)//原来的(变化前)  新点击的(变化后)
                this.$router.push({name: newValue});
            }
        }
    }
</script>

<style>

</style>
